<template>
    <el-container style="height: 100%">
        <el-main class="main-con">
                <component :is="activeComponent" :params="params" @changeComponent="changeComponent" ref="com" :key="index"/>
        </el-main>
    </el-container>
</template>
<script>

import list from './list'
import add from './form'
export default {
  name: 'page',
  components: {
    list,
    add
  },
  data() {
    return {
      index: 0,
      params: {},
      activeComponent: 'list'
    }
  },
  methods: {
    changeComponent(path) {
      this.index++;
      this.activeComponent = path.active;
      this.params = path;
    }
  },
  mounted() {
    this.$nextTick(function() {

    })
  },
  destroyed() {
  }
}
</script>

<style scoped>
    .main-con{
        overflow: hidden;
    }
</style>
